<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简历练习</title>
</head>
<body>
    <table border="1" style="border-collapse: collapse">
        <caption>个人简历</caption>
        <tr>
            <td>照片:</td>
            <td id="t1"></td>
        </tr>
        <tr>
            <td>姓名:</td>
            <td id="t2"></td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td id="t3"></td>
        </tr>
        <tr>
            <td>好友:</td>
            <td id="t4"></td>
        </tr>
    </table>

    <script>
        let person ={
            name:'传奇哥',
            age:18,
            friends:['路飞','索隆','娜美','张飞'],
            imgUrl:'img/fcq.jpg'
        };
        let t1 = document.getElementById("t1");
        let t2 = document.getElementById("t2");
        let t3 = document.getElementById("t3");
        let t4 = document.getElementById("t4");
        let img = document.createElement("img");
        img.src=person.imgUrl;
        img.width=200;
        t1.append(img);
        t2.append(person.name);
        t3.append(person.age);
        let ul = document.createElement("ul");
        for (let i=0;i<person.friends.length;i++){
            let li = document.createElement("li");
            li.innerHTML=person.friends[i];
            ul.append(li);
        }
        t4.append(ul);
    </script>
</body>
</html>